<template>
    <el-card style="max-width: 480px;margin: 260px auto;">
        <h2 style="text-align: center;">登录</h2>
        <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
        >
            <el-form-item label="账号" prop="UserName">
                <el-input v-model="ruleForm.UserName" />
            </el-form-item>

            <el-form-item label="密码" prop="Password">
                <el-input v-model="ruleForm.Password" type="password" show-password/>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    登录
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script lang="ts" setup>
    import { reactive, ref } from 'vue'
    import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
    import axios from 'axios'
    import { useRouter } from 'vue-router'

    const router=useRouter()
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = ref({
       UserName:"",
       Password:"",
    })

    const locationOptions = ['Home', 'Company', 'School']

    const rules = reactive<FormRules>({
        UserName: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
        ],
        Password: [
            { required: true, message: '请输入用户密码', trigger: 'blur' },
        ],
    })

    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                axios.post("http://localhost:5239/api/User/UserLogin",ruleForm.value)
                .then(res=>{
                    if(res.data.Code==200)
                    {
                        ElMessage.success(res.data.Message); 

                        router.push("/Meun")
                    }
                    else
                    {
                        ElMessage.error(res.data.Message);
                    }
                })
            } else {
            console.log('error submit!', fields)
            }
        })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }

    const options = Array.from({ length: 10000 }).map((_, idx) => ({
        value: `${idx + 1}`,
        label: `${idx + 1}`,
    }))
</script>
